<template>
	<view class="container">
		<uni-forms ref="formRef" :model="formData" :rules="rules">
			<uni-forms-item label="平台名字" name="title">
				<uni-easyinput v-model="formData.title" placeholder="请输入平台名字" />
			</uni-forms-item>
			<uni-forms-item label="平台网址" name="url">
				<uni-easyinput v-model="formData.url" placeholder="请输入平台网址" />
			</uni-forms-item>
			<uni-forms-item label="APP下载地址" name="app_url">
				<uni-easyinput v-model="formData.app_url" placeholder="请输入APP下载地址" />
			</uni-forms-item>
			<uni-forms-item label="平台帐号" name="app_name">
				<uni-easyinput v-model="formData.app_name" placeholder="请输入平台帐号" />
			</uni-forms-item>
			<uni-forms-item label="平台密码" name="app_password">
				<uni-easyinput v-model="formData.app_password" placeholder="请输入平台密码" />
			</uni-forms-item>
			<uni-forms-item label="联系方式" name="contact">
				<uni-easyinput v-model="formData.contact" placeholder="请输入联系方式" />
			</uni-forms-item>

			<button class="submit-btn" @click="submitForm">提交</button>
		</uni-forms>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

// 表单数据
const formData = reactive({
	title: '',
	url: '',
	app_url: '',
	app_name: '',	
	app_password: '',
	contact: ''
})

// 表单规则
const rules = {
	title: {
		rules: [
			{
				required: true,
				errorMessage: '请输入标题'
			},
			{
				minLength: 2,
				maxLength: 20,
				errorMessage: '标题长度在2-20个字符之间'
			}
		]
	},
	url: {
		rules: [
			{
				required: true,
				errorMessage: '请输入网址'
			},
			{
				pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
				errorMessage: '请输入正确的网址格式'
			}
		]
	},
	contact: {
		rules: [
			{
				required: true,
				errorMessage: '请输入联系方式'
			},
			{
				pattern: /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})$/,
				errorMessage: '请输入正确的手机号或座机号(座机格式如:010-12345678)'
			}
		]
	},
	description: {
		rules: [
			{
				required: true,
				errorMessage: '请输入描述'
			},
			{
				minLength: 5,
				errorMessage: '描述至少5个字符'
			}
		]
	}
}

// 表单ref
const formRef = ref<any>(null)

// 提交表单
const submitForm = () => {
	formRef.value?.validate().then((res: any) => {
		console.log('表单数据：', formData)
		// TODO: 这里处理表单提交逻辑
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
	}).catch((err: any) => {
		console.log('表单错误：', err)
	})
}
</script>

<style lang="scss">
.container {
	padding: 20px;
}

</style>